<script setup>
//import { defineProps } from 'vue';
const  props = defineProps(["menuData"]);
const menuData= props.menuData;

</script>
<template>
    <div>
        <template v-for="menu in menuData">
            <!--有子菜单的时候-->
            <el-sub-menu :key="menu.index" :index="menu.index" v-if="menu.children">
                <!-- <template slot="title">
                    <i :class="menu.icon"></i>
                    <span slot="title">{{ menu.name }}</span>
                </template> -->
                <template #title>
                    <el-icon :class="menu.icon"></el-icon>
                    <span>{{ menu.name }}</span>
                </template>
                <!--使用递归继续展示其余子菜单-->
                <menu-tree :menuData="menu.children"></menu-tree>
            </el-sub-menu>
            <!--只有一级菜单时-->
            <el-menu-item :index="menu.index" v-else>
                <el-icon :class="menu.icon"></el-icon>
                <span >{{ menu.name }}</span>
            </el-menu-item>
        </template>
    </div>

</template>